<template>
    <page-layout>
        <template v-slot:header>
            <el-input :data="shopList"  placeholder="请输入产品名字" size="mini" style="width:250px;padding:0 12px"/>
            <el-button size="mini" type="primary">查询</el-button>
            <el-button size="mini" type="success">新增</el-button>
        </template>
        <template>
            <el-table :data="shopList" style="width: 100%">
            <el-table-column prop="shop_name" label="商铺名字" width="180" fixed="left"></el-table-column>
            <el-table-column prop="state" label="商品状态" width="100" fixed="left">
                <template v-slot="{row:{state}}">
                    <div v-mystate="state" />
                </template>
            </el-table-column>
            <el-table-column prop="area" label="经营区域" width="180" show-overflow-tooltip></el-table-column>
            <el-table-column prop="manager" label="店长" width="180"></el-table-column>
            <el-table-column prop="remark" label="备注" width="180" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
                <template slot-scope="{row}">
                    <el-button @click="detailEvt(row)" type="text" size="small">详情</el-button>
                    <el-button @click="editEvt(row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" v-if="row.state === 'Y'">暂停营业</el-button>
                    <el-button type="text" size="small" v-if="row.state === 'N'">正常营业</el-button>
                </template>
            </el-table-column>
        </el-table>
  </template>
    </page-layout>
</template>
<script>
    import store from '@/store'
    export default{
        data() {
            return {
                shopList:[],
                shopState:[]
            }
        },
        methods:{
            detailEvt(data){
                sessionStorage.setItem('detail',data.shop_id)
                this.$router.push('/shop/detail')
                // this.$router.push('/shop/detail?shop_id=' + data.shop_id)
            },
            editEvt(data){
                sessionStorage.setItem('edit',data.shop_id)
                this.$router.push('/shop/edit')
                // this.$router.push('/shop/edit?shop_id=' + data.shop_id)
            },
            async shopUpdateEvt(){
                let update = await shopUpdateApi()
            }
        },
        filters:{
            stateFilter(value,state){
                let dict = state.find(it => it.code === value)
                if(!dict) return value
                return dict.name
            }
        },
        directives:{
            mystate(el,{value}){
                let obj = {
                    Y:{text:'正在运营',class:'shop-state yes'},
                    N:{text:'暂停运营',class:'shop-state no'},
                }
                el.innerHTML = obj[value].text
                el.setAttribute('class',obj[value].class)
            }
        },
        async mounted(){
            this.shopList = store.getters['common/shopList']
        }
    }
</script>
<style lang="less">
    .shop-state{
    color:#666;
    &::before{
        content:'';
        display:inline-block;
        vertical-align:middle;
        width:6px;
        height:6px;
        border-radius:50%;
        background-color: #666;
        margin-right: 6px;
    }
    &.no{
        color:#f8ddb5;
        &::before{
            background-color:#f8ddb5 ;
        }
    }
    &.yes{
        color:#67C23A;
        &::before{
            background-color:#67C23A ;
        }
    }
  }

</style>